﻿<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        快捷菜单
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="shortcut-menu" data-id="home1" data-title="主页"
                                     data-url="http://www.bing.com">
                                    <i class="layui-icon layui-icon-home"></i>
                                </div>
                                <span class="shortcut-menu-label">主页</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="shortcut-menu" data-id="home2" data-title="弹层"
                                     data-url="http://www.bing.com">
                                    <i class="layui-icon layui-icon-camera"></i>
                                </div>
                                <span class="shortcut-menu-label">弹层</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="shortcut-menu" data-id="home2" data-title="聊天"
                                     data-url="http://www.bing.com">
                                    <i class="layui-icon layui-icon-star"></i>
                                </div>
                                <span class="shortcut-menu-label">聊天</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="shortcut-menu" data-id="home3" data-title="相机"
                                     data-url="http://www.bing.com">
                                    <i class="layui-icon layui-icon-camera"></i>
                                </div>
                                <span class="shortcut-menu-label">相机</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="shortcut-menu" data-id="home4" data-title="表单"
                                     data-url="http://www.bing.com">
                                    <i class="layui-icon layui-icon-console"></i>
                                </div>
                                <span class="shortcut-menu-label">表单</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="shortcut-menu" data-id="home5" data-title="安全"
                                     data-url="http://www.bing.com">
                                    <i class="layui-icon layui-icon-auz"></i>
                                </div>
                                <span class="shortcut-menu-label">安全</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="shortcut-menu" data-id="home6" data-title="公告"
                                     data-url="http://www.bing.com">
                                    <i class="layui-icon layui-icon-cart"></i>
                                </div>
                                <span class="shortcut-menu-label">公告</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="shortcut-menu" data-id="home7" data-title="更多"
                                     data-url="http://www.bing.com">
                                    <i class="layui-icon layui-icon-app"></i>
                                </div>
                                <span class="shortcut-menu-label">更多</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        代办任务
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="deputy">
                                    <div class="deputy-label">待审评论</div>
                                    <div class="deputy-count">21</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="deputy">
                                    <div class="deputy-label">待审帖子</div>
                                    <div class="deputy-count">32</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="deputy">
                                    <div class="deputy-label">待审文章</div>
                                    <div class="deputy-count">14</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="deputy">
                                    <div class="deputy-label">待审用户</div>
                                    <div class="deputy-count">63</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records-1" style="height:400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-top: 15px; padding-bottom: 15px;">
                        <table class="layui-hide" id="ID-table-demo-data"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">留言板</div>
            <div class="layui-card-body">
                <ul class="message-board">
                    <li>
                        <p>要不要作为我的家人，搬来我家。</p>
                        <span>12月25日 19:92</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
                        <span>4月30日 22:43</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>夏天真的来了，尽管它还有些犹豫。</p>
                        <span>4月30日 22:43</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
                        <span>4月30日 22:43</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
                        <span>4月30日 22:43</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>那是一种内在的东西，他们到达不了，也无法触及！</p>
                        <span>5月12日 01:25</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    </li>
                    <li>
                        <p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
                        <span>6月11日 15:33</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>一切都在不可避免的走向庸俗。</p>
                        <span>2月09日 13:40</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>路上没有灯火的时候，就点亮自己的头颅。</p>
                        <span>3月11日 12:30</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>

                    <li>
                        <p>我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂</p>
                        <span>4月30日 22:43</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    </li>
                    <li>
                        <p>接近，是我对一切的态度，是我对一切态度的距离</p>
                        <span>6月11日 15:33</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
                        <span>2月09日 13:40</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

@section styles{
    <link rel="stylesheet" href="~/admin/css/other/console.css" />
    
    }

@section scripts{
    <script>
			layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function() {
				var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					echarts = layui.echarts,
					table = layui.table,
					carousel = layui.carousel;

				var inst = table.render({
					elem: '#ID-table-demo-data',
					cols: [
						[{
								field: 'id',
								title: 'ID',
								width: 80,
								sort: true
							},
							{
								field: 'username',
								title: '用户',
								width: 120
							},
							{
								field: 'sex',
								title: '性别',
								width: 80
							},
							{
								field: 'sign',
								title: '签名',
								minWidth: 160
							},
							{
								field: 'city',
								title: '城市',
								width: 80
							},
							{
								field: 'experience',
								title: '状态',
								width: 80,
								sort: true
							}
						]
					],
					data: [{
						"id": "10001",
						"username": "就眠儀式",
						"sex": "男",
						"city": "山东",
						"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
						"experience": "在线"
					}, {
						"id": "10002",
						"username": "就眠儀式",
						"sex": "男",
						"city": "山东",
						"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
						"experience": "在线",
					}, {
						"id": "10003",
						"username": "就眠儀式",
						"sex": "男",
						"city": "山东",
						"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
						"experience": "在线"
					}, {
						"id": "10004",
						"username": "就眠儀式",
						"sex": "男",
						"city": "山东",
						"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
						"experience": "在线"
					}, {
						"id": "10005",
						"username": "就眠儀式",
						"sex": "男",
						"city": "山东",
						"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
						"experience": "在线"
					}, {
						"id": "10006",
						"username": "就眠儀式",
						"sex": "男",
						"city": "山东",
						"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
						"experience": "在线"
					}, {
						"id": "10007",
						"username": "就眠儀式",
						"sex": "男",
						"city": "山东",
						"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
						"experience": "在线"
					}],
					page: false
				});


				var echartsRecordsOne = echarts.init(document.getElementById('echarts-records-1'), 'walden');

				$("body").on("click", "[data-url]", function() {
					PearAdmin.changePage({
						id: $(this).attr("data-id"),
						title: $(this).attr("data-title"),
						url: $(this).attr("data-url"),
						type: "_iframe",
					});
				})

				let color = [
					"#0090FF",
					"#36CE9E",
					"#FFC005",
					"#FF515A",
					"#8B5CFF",
					"#00CA69"
				];

				let echartData = [{
						name: "1",
						value1: 100,
						value2: 233
					},
					{
						name: "2",
						value1: 138,
						value2: 233
					},
					{
						name: "3",
						value1: 350,
						value2: 200
					},
					{
						name: "4",
						value1: 173,
						value2: 180
					},
					{
						name: "5",
						value1: 180,
						value2: 199
					},
					{
						name: "6",
						value1: 150,
						value2: 233
					},
					{
						name: "7",
						value1: 180,
						value2: 210
					},
					{
						name: "8",
						value1: 230,
						value2: 180
					}
				];

				let xAxisData = echartData.map(v => v.name);
				let yAxisData1 = echartData.map(v => v.value1);
				let yAxisData2 = echartData.map(v => v.value2);

				const hexToRgba = (hex, opacity) => {
					let rgbaColor = "";
					let reg = /^#[\da-f]{6}$/i;
					if (reg.test(hex)) {
						rgbaColor =
							`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
							"0x" + hex.slice(3, 5)
						)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
					}
					return rgbaColor;
				}

				optionOne = {
					color: color,
					legend: {
						right: 10,
						top: 10
					},
					tooltip: {
						trigger: "axis",
						formatter: function(params) {
							let html = '';
							params.forEach(v => {
								html +=
									`<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                万元`;
							})
							return html
						},
						extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
						axisPointer: {
							type: 'shadow',
							shadowStyle: {
								color: '#ffffff',
								shadowColor: 'rgba(225,225,225,1)',
								shadowBlur: 5
							}
						}
					},
					grid: {
						top: 100,
						containLabel: true
					},
					xAxis: [{
						type: "category",
						boundaryGap: false,
						axisLabel: {
							formatter: '{value}月',
							textStyle: {
								color: "#333"
							}
						},
						axisLine: {
							lineStyle: {
								color: "#D9D9D9"
							}
						},
						data: xAxisData
					}],
					yAxis: [{
						type: "value",
						name: '单位：万千瓦时',
						axisLabel: {
							textStyle: {
								color: "#666"
							}
						},
						nameTextStyle: {
							color: "#666",
							fontSize: 12,
							lineHeight: 40
						},
						splitLine: {
							lineStyle: {
								type: "dashed",
								color: "#E9E9E9"
							}
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						}
					}],
					series: [{
						name: "2018",
						type: "line",
						smooth: true,
						symbolSize: 8,
						zlevel: 3,
						lineStyle: {
							normal: {
								color: color[0],
								shadowBlur: 3,
								shadowColor: hexToRgba(color[0], 0.5),
								shadowOffsetY: 8
							}
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: hexToRgba(color[0], 0.3)
										},
										{
											offset: 1,
											color: hexToRgba(color[0], 0.1)
										}
									],
									false
								),
								shadowColor: hexToRgba(color[0], 0.1),
								shadowBlur: 10
							}
						},
						data: yAxisData1
					}, {
						name: "2019",
						type: "line",
						smooth: true,
						symbolSize: 8,
						zlevel: 3,
						lineStyle: {
							normal: {
								color: color[1],
								shadowBlur: 3,
								shadowColor: hexToRgba(color[1], 0.5),
								shadowOffsetY: 8
							}
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: hexToRgba(color[1], 0.3)
										},
										{
											offset: 1,
											color: hexToRgba(color[1], 0.1)
										}
									],
									false
								),
								shadowColor: hexToRgba(color[1], 0.1),
								shadowBlur: 10
							}
						},
						data: yAxisData2
					}]
				};

				echartsRecordsOne.setOption(optionOne);

				setInterval(() => {
					echartsRecordsOne.resize();
				}, 500);

				window.onresize = function() {
					echartsRecordsOne.resize();
				}

			});
    </script>
    
    
    
    }